<template>
  <view class="edit-patient-container">
    <!-- 头部 -->
    <view class="header">
      <text class="title">编辑就诊人</text>
    </view>

    <!-- 表单内容 -->
    <view class="form-container">
      <form @submit="submitForm">
        <view class="form-item">
          <text class="label">姓名 *</text>
          <input 
            class="input" 
            v-model="patientForm.name" 
            placeholder="请输入就诊人姓名"
            maxlength="50"
          />
        </view>
        
        <view class="form-item">
          <text class="label">性别 *</text>
          <picker 
            class="picker" 
            :value="genderIndex" 
            :range="genderOptions" 
            @change="onGenderChange"
          >
            <view class="picker-text">
              {{ patientForm.gender ? getGenderText(patientForm.gender) : '请选择性别' }}
            </view>
          </picker>
        </view>
        
        <view class="form-item">
          <text class="label">年龄 *</text>
          <input 
            class="input" 
            type="number" 
            v-model="patientForm.age" 
            placeholder="请输入年龄"
            maxlength="3"
          />
        </view>
        
        <view class="form-item">
          <text class="label">身份证号 *</text>
          <input 
            class="input" 
            v-model="patientForm.idCard" 
            placeholder="请输入18位身份证号"
            maxlength="18"
          />
        </view>
        
        <view class="form-item">
          <text class="label">联系电话</text>
          <input 
            class="input" 
            type="number" 
            v-model="patientForm.phone" 
            placeholder="请输入联系电话"
            maxlength="11"
          />
        </view>
        
        <view class="form-item">
          <text class="label">紧急联系人</text>
          <input 
            class="input" 
            v-model="patientForm.emergencyContact" 
            placeholder="请输入紧急联系人姓名"
            maxlength="50"
          />
        </view>
        
        <view class="form-item">
          <text class="label">紧急联系人电话</text>
          <input 
            class="input" 
            type="number" 
            v-model="patientForm.emergencyPhone" 
            placeholder="请输入紧急联系人电话"
            maxlength="11"
          />
        </view>
        
        <view class="form-item">
          <text class="label">居住地址</text>
          <input 
            class="input" 
            v-model="patientForm.address" 
            placeholder="请输入居住地址"
            maxlength="200"
          />
        </view>
        
        <view class="form-item">
          <text class="label">过敏史 *</text>
          <textarea 
            class="textarea" 
            v-model="patientForm.allergicHistory" 
            placeholder="请输入过敏史（药物、食物等）"
            maxlength="500"
          />
        </view>
        
        <view class="form-item">
          <text class="label">既往病史 *</text>
          <textarea 
            class="textarea" 
            v-model="patientForm.medicalHistory" 
            placeholder="请输入既往病史（如高血压、糖尿病等）"
            maxlength="500"
          />
        </view>
      </form>
    </view>

    <!-- 底部按钮 -->
    <view class="footer">
      <button class="btn cancel" @click="goBack">取消</button>
      <button class="btn confirm" type="primary" @click="submitForm" :loading="submitting">
        {{ submitting ? '提交中...' : '确定' }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'EditPatient',
  data() {
    return {
      submitting: false,
      loading: false,
      patientForm: {
        id: null,
        name: '',
        gender: null,
        age: null,
        idCard: '',
        phone: '',
        emergencyContact: '',
        emergencyPhone: '',
        address: '',
        allergicHistory: '',
        medicalHistory: ''
      },
      genderOptions: ['男', '女', '其他']
    }
  },
  
  computed: {
    genderIndex() {
      if (!this.patientForm.gender) return -1
      return this.patientForm.gender - 1
    }
  },
  
  onLoad(options) {
    if (options.id) {
      this.getPatientDetail(options.id)
    }
  },
  
  methods: {
    // 获取就诊人详情
    async getPatientDetail(id) {
      this.loading = true
      try {
        // 获取token
        const token = uni.getStorageSync('token')
        if (!token) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          return
        }
        
        const response = await uni.request({
          url: `http://localhost:8080/patient/${id}`,
          method: 'GET',
          header: {
            'Authorization': `Bearer ${token}`
          }
        })
        
        if (response.data.code === 200) {
          const patient = response.data.data
          Object.assign(this.patientForm, patient)
        } else {
          uni.showToast({
            title: response.data.message || '获取就诊人信息失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '获取就诊人信息失败',
          icon: 'none'
        })
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    
    // 提交表单
    async submitForm() {
      // 表单验证
      if (!this.patientForm.name.trim()) {
        uni.showToast({
          title: '请输入就诊人姓名',
          icon: 'none'
        })
        return
      }
      
      if (!this.patientForm.gender) {
        uni.showToast({
          title: '请选择性别',
          icon: 'none'
        })
        return
      }
      
      if (!this.patientForm.age) {
        uni.showToast({
          title: '请输入年龄',
          icon: 'none'
        })
        return
      }
      
      if (!this.patientForm.idCard.trim()) {
        uni.showToast({
          title: '请输入身份证号',
          icon: 'none'
        })
        return
      }
      
      if (!this.patientForm.allergicHistory.trim()) {
        uni.showToast({
          title: '请输入过敏史',
          icon: 'none'
        })
        return
      }
      
      if (!this.patientForm.medicalHistory.trim()) {
        uni.showToast({
          title: '请输入既往病史',
          icon: 'none'
        })
        return
      }
      
      this.submitting = true
      
      try {
        // 获取token
        const token = uni.getStorageSync('token')
        if (!token) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          return
        }
        
        const response = await uni.request({
          url: 'http://localhost:8080/patient/update',
          method: 'PUT',
          header: {
            'Authorization': `Bearer ${token}`
          },
          data: this.patientForm
        })
        
        if (response.data.code === 200) {
          uni.showToast({
            title: '修改成功',
            icon: 'success'
          })
          // 返回上一页并刷新列表
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          uni.showToast({
            title: response.data.message || '修改失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '修改失败',
          icon: 'none'
        })
        console.error(error)
      } finally {
        this.submitting = false
      }
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 性别选择
    onGenderChange(e) {
      this.patientForm.gender = parseInt(e.detail.value) + 1
    },
    
    // 获取性别文本
    getGenderText(gender) {
      const genderMap = {
        1: '男',
        2: '女',
        3: '其他'
      }
      return genderMap[gender] || '未知'
    }
  }
}
</script>

<style scoped>
.edit-patient-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.form-container {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
  font-weight: 500;
}

.input, .picker {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  background-color: #fff;
}

.picker-text {
  line-height: 80rpx;
  color: #333;
}

.textarea {
  width: 100%;
  min-height: 120rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  background-color: #fff;
}

.footer {
  display: flex;
  gap: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

.btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.cancel {
  background-color: #f5f5f5;
  color: #666;
}

.confirm {
  background-color: #409eff;
  color: #fff;
}
</style> 